<template>
  <div class="Home">
    <h2>文件的导入导出</h2>
    <div class="operating">
      <label for="import">导入</label>
      <input
        type="file"
        id="import"
        @change="handleImport"
        accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
      />
      <Button type="primary" class="export" @click="export2Excel">导出</Button>
    </div>
    <Table :columns="columns" :data="data"></Table>
  </div>
</template>
<script>
import excel from "../excel/excel";
export default {
  name: "Home",
  data() {
    return {
      // 表格数据格式 列
      columns: [
        {
          title: "人员类型",
          key: "people_type",
        },
        {
          title: "姓名",
          key: "username",
        },
        {
          title: "性别",
          key: "gender",
          render: (h, params) => {
            return h("p", Number(params.row.gender) ? "女" : "男");
          },
        },
        {
          title: "学籍号",
          key: "id_card",
        },
        {
          title: "年龄",
          key: "age",
        },
        {
          title: "照片",
          type: "image",
          key: "image_base64",
          render: (h, params) => {
            return h("div", [
              h("img", {
                class: "tableRegistrationPhoto",
                attrs: {
                  src: params.row.image_base64,
                },
              }),
            ]);
          },
        },
      ],
      // 表格数据
      data: [],
    };
  },
  mounted() {
    this.postPeopleData();
  },
  methods: {
    // 导入
    handleImport(e) {
      let file = e.target.files[0];
      let obj = {
        people_type: "人员类型",
        username: "姓名",
        gender: "性别",
        id_card: "学籍号",
        age: "年龄",
      };
      excel(file, obj)
        .then((res) => {
          console.log(res);
          this.data = res;
        })
        .catch((error) => {
          console.warn(error);
        });
    },
    // 导出
    export2Excel() {
      this.$Modal.confirm({
        title: "提示",
        content: "是否导出数据",
        onOk: () => {
          require.ensure([], () => {
            const { export_json_to_excel } = require("../excel/Export2Excel");
            const tHeader = [
              "人员类型",
              "姓名",
              "性别",
              "学籍号",
              "年龄",
              "照片",
            ]; // 设置Excel的表格第一行的标题
            const filterVal = [
              "people_type",
              "username",
              "gender",
              "id_card",
              "age",
              "image_base64",
            ]; // index、nickName、name是tableData里对象的属性
            const list = this.data; //把data里的tableData存到list
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, "导出文件名"); //导出Excel 文件名
          });
        },
      });
    },
    // 筛选数据
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    // 获取表格数据
    postPeopleData() {
      this.$store.dispatch("home/PostPeopleData", {}).then((res) => {
        if (res.statusCode === 200) {
          res.data.forEach((item, index) => {
            if (item?.imageUrls[0]?.imageUrl) {
              item.image_base64 =
                "https://192.168.1.12/" + item.imageUrls[0].imageUrl;
            }
          });
          this.data = res.data;
        }
      });
    },
  },
};
</script>
<style lang="scss">
.Home {
  .ivu-table-wrapper {
    .tableRegistrationPhoto {
      width: 50px;
      vertical-align: middle;
    }
  }
}
</style>
<style lang="scss" scoped>
.Home {
  width: 1200px;
  margin: auto;
  h2 {
    text-align: center;
    font-size: 20px;
    height: 50px;
    line-height: 50px;
  }
  .operating {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .import {
      margin-right: 10px;
    }
  }
}
</style>